import React,{ useState,useEffect } from 'react';
import { Popover, Button,Collapse } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import {history} from 'umi'
import CustomTable from '@/components/Table';
import AdvancedModal from '@/components/Modal/AdvancedModal';
import cardStyles from '../../index.less';
import styles from './index.less';
import {getFeeReductionList,getOtherList} from '@/service/fiance/index'

const {Panel} = Collapse

function OtherOrder(props:any) {
  const { info } = props;
  const [isOpenModal, setIsOpenModal] = useState(false);
  const [derateFeesList, setDerateFeesList] = useState<any[]>([]); // 费用减免信息
  const [rentFreeList, setRentFreeList] = useState<any[]>([]); // 免租信息
  const [delayRentList, setDelayRentList] = useState<any[]>([]); // 延租信息
  const [deductionAmountList,setDeductionAmountList] = useState<any[]>([]); // 减免详情
  const [total1, setTotal1] = useState(0) // 费用减免
  const [params1, setParams1] = useState({
		current: 1,
		size: 10,
	})
  const customizeHeader = (value: string) => (
    <div>
      <div className={styles.tip} />
      {value}
    </div>
  )
  const [total2, setTotal2] = useState(0) // 免租
  const [params2, setParams2] = useState({
		current: 1,
		size: 10,
	})
  const [total3, setTotal3] = useState(0) // 延租
  const [params3, setParams3] = useState({
		current: 1,
		size: 10,
	})
  useEffect(()=>{
    getOtherList(info?.orderCarNo).then((res:any)=>{
      if(res?.success){
        setDerateFeesList(res?.data?.abatementListDTOList) // 费用减免信息
        res?.data?.delayListDtoList?.forEach((res1:any,index:number)=>{
          if(res1.delayType ===1){
            res.data.delayListDtoList[index].delayType = '无偿'
          }else if(res1.delayType ===2){
            res.data.delayListDtoList[index].delayType = '有偿'
          }
        })
        setDelayRentList(res?.data?.delayListDtoList) // 延租信息
        setRentFreeList(res?.data?.exemptionListDTOList) // 免租信息
        setTotal1(res?.data?.total)
      }
     
    })
  },[])
  // 抵扣金额点击
  const deductionAmount = (id:any)=>{
    setIsOpenModal(true)
    getFeeReductionList({abatementNo:id}).then((res:any)=>{
        if(res?.success){
          setDeductionAmountList(res?.data)
        }
    })
  }

  const derateFeesColumns = [
    { title: '申请批次', dataIndex: 'abatementBatch', align: 'center' },
    { title: '减免单号', dataIndex: 'abatementNo', align: 'center' },
    { title: '申请时间', dataIndex: 'applyTime', align: 'center' },
    { title: '减免金额', dataIndex: 'applyAmount', align: 'center' },
    {
      title: (
        <div>
          已抵扣金额{' '}
          <Popover content="点击弹出费用抵扣明细">
            <QuestionCircleOutlined />
          </Popover>
        </div>
      ),
      dataIndex: 'usedAmount',
      align: 'center',
      render: (_: any, record: any) => (
        <Button type="link" onClick={()=>deductionAmount(record?.abatementNo)}>
          {record.usedAmount}
        </Button>
      ),
    },
    { title: '剩余可抵扣金额', dataIndex: 'surplusAmount', align: 'center' },
    { title: '备注', dataIndex: 'handleRemark', align: 'center' },
  ]; // 费用减免
  const rentFree = [
    { title: '申请批次', dataIndex: 'exemptionBatch', align: 'center' },
    { title: '免租单号', dataIndex: 'exemptionNo', align: 'center' },
    { title: '申请时间', dataIndex: 'applyTime', align: 'center' },
    { title: '免租起始日', dataIndex: 'startTime', align: 'center' },
    { title: '免租结束日', dataIndex: 'finishTime', align: 'center' },
    { title: '免租比例', dataIndex: 'percentage', align: 'center' },
    { title: '免租费用项', dataIndex: 'exemptionItemname', align: 'center' },
    // { title: '免租金额', dataIndex: '', align: 'center' },
    { title: '备注', dataIndex: 'handleRemark', align: 'center' },
  ]; // 免租
  const delayRent = [
    { title: '申请批次', dataIndex: 'delayBatch', align: 'center' },
    { title: '延租单号', dataIndex: 'delayNo', align: 'center' },
    { title: '申请时间', dataIndex: 'applyTime', align: 'center' },
    { title: '延租天数', dataIndex: 'delayCount', align: 'center' },
    { title: '延租类型', dataIndex: 'delayType', align: 'center' },
    { title: '延租日租金', dataIndex: 'rentAmount', align: 'center' },
    { title: '备注', dataIndex: 'handleRemark', align: 'center' },
  ]; // 延租
  const clumInfo = [
    { title: '减免单号', dataIndex: 'abatementNo', align: 'center' },
    { title: '抵扣类型', dataIndex: 'abatementType', align: 'center',render:(text:any)=>(
      <>
        {text===1?<span>应收</span>:<span>结算</span>}
      </>
    ) },
    { title: '抵扣时间', dataIndex: 'createTime', align: 'center' },
    { title: '应收/结算单号', dataIndex: 'bizNo', align: 'center',render:(text:any,record:any)=>(
      <Button
        type="link"
        size="small"
        onClick={() => {
          if(record?.abatementType===1){
              history.push(`/finance/accountsReceivable/details?id=${record.id}`)
          }else{
            history.push(`/finance/settlementAudit/details?id=${record.id}`)
          }
        }}>
        {text}
      </Button>
    ) },
    { title: '抵扣金额', dataIndex: 'abatementAmount', align: 'center' },
  ]

  

  return (
    <div className={cardStyles.card} id="otherOrder">
      <p className={cardStyles.title}>其他关联单据信息</p>
      <Collapse
          defaultActiveKey={[]}
          ghost
          expandIconPosition="end">
            <Panel header={customizeHeader('费用减免信息')} key="1">
              <CustomTable
                params={params1}
                columns={derateFeesColumns}
                pagination={false}
                total={total1}
                callback={(pagination: any) => {
                  setParams1(pagination)
                }}
                loading={false}
                dataSource={derateFeesList}
              />
            </Panel>
            <Panel header={customizeHeader('免租信息')} key="2">
              <CustomTable
                params={params2}
                columns={rentFree}
                pagination={false}
                total={total2}
                callback={(pagination: any) => {
                  setParams2(pagination)
                }}
                loading={false}
                dataSource={rentFreeList}
              />
            </Panel>
            <Panel header={customizeHeader('延租信息')} key="3">
              <CustomTable
                params={params3}
                columns={delayRent}
                pagination={false}
                total={total3}
                callback={(pagination: any) => {
                  setParams3(pagination)
                }}
                loading={false}
                dataSource={delayRentList}
              />
            </Panel>
        </Collapse>    
        <AdvancedModal
          title="费用抵扣明细"
          isOpen={isOpenModal}
          setIsOpen={setIsOpenModal}
          width={980}
          footer={null}
        >
          <CustomTable
            columns={clumInfo}
            pagination={false}
            total={0}
            callback={() => {}}
            loading={false}
            dataSource={deductionAmountList}
          />
        </AdvancedModal>
    </div>
  );
}

export default OtherOrder;
